<template>
    <Transition name="zx-zoom-in-top" @after-leave="doDestroy">
        <div
            v-show="showPopper"
            class="zx-autocomplete-suggestion zx-popper"
            :class="{ 'is-loading': !parent.hideLoading && parent.loading }"
            :style="{ width: dropdownWidth }"
            role="region"
        >
            <ZxScrollbar
                tag="ul"
                wrap-class="zx-autocomplete-suggestion__wrap"
                view-class="zx-autocomplete-suggestion__list"
            >
                <li v-if="!parent.hideLoading && parent.loading"><i class="zx-icon-loading" /></li>
                <slot v-else />
            </ZxScrollbar>
        </div>
    </Transition>
</template>
<script>
import Popper from '@src/utils/vue-popper';
import Emitter from '@src/mixins/emitter';
import ZxScrollbar from '../../../components/scrollbar';

export default {
    name: 'ZxAutocompleteSuggestions',

    components: {
        ZxScrollbar,
    },

    mixins: [Popper, Emitter],

    componentName: 'ZxAutocompleteSuggestions',

    props: {
        options: {
            default() {
                return {
                    gpuAcceleration: false,
                };
            },
        },
        id: String,
    },

    data() {
        return {
            parent: this.$parent,
            dropdownWidth: '',
        };
    },

    updated() {
        this.$nextTick(_ => {
            this.popperJS && this.updatePopper();
        });
    },

    mounted() {
        this.$parent.popperElm = this.popperElm = this.$el;
        this.referenceElm = this.$parent.$refs.input.$refs.input || this.$parent.$refs.input.$refs.textarea;
        this.referenceList = this.$el.querySelector('.zx-autocomplete-suggestion__list');
        this.referenceList.setAttribute('role', 'listbox');
        this.referenceList.setAttribute('id', this.id);
    },

    created() {
        this.$on('visible', (val, inputWidth) => {
            this.dropdownWidth = inputWidth + 'px';
            this.showPopper = val;
        });
    },

    methods: {
        select(item) {
            this.dispatch('ZxAutocomplete', 'item-click', item);
        },
    },
};
</script>
